<template>
	<div id="welcomeWrap">
		<div id="logo"></div>
		<div id="logoShadow"></div>
		<div id="logoText"></div>
	</div>
</template>

<style>
	#welcomeWrap{width: 5rem; height: 8rem; margin: 0 auto; position: relative;}
	#logo{width: 3rem; height: 3rem; position: absolute; bottom: 2rem; left:50%; margin-left: -1.5rem; background-image: url("../images/logo.svg"); background-size: 3rem 3rem; background-repeat: no-repeat; z-index: 20;
		-webkit-animation: jump 1s 1;
		-moz-animation: jump 1s 1;
		-o-animation: jump 1s 1;
		-ms-animation: jump 1s 1;
		animation: jump 1s 1;
	}
	#logoShadow {
		position: absolute !important;
		left: 50%;
		bottom: 2.1rem;
		width: 0.48rem;
		height: 0.12rem;
		background: rgba(20, 20, 20, .3);
		box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
		border-radius: 0.48rem / 0.48rem;
		z-index: 10;
		margin-left: -0.24rem;
		-webkit-transform: scaleY(.3);
		-moz-transform: scaleY(.3);
		-ms-transform: scaleY(.3);
		-o-transform: scaleY(.3);
		transform: scaleY(.3);
		-webkit-animation: shrink 1s 1;
		-moz-animation: shrink 1s 1;
		-o-animation: shrink 1s 1;
		-ms-animation: shrink 1s 1;
		animation: shrink 1s 1;
	}
	#logoText{width: 3rem; height: 0.8rem; position: absolute; bottom: 0.8rem; left: 50%; margin-left: -1.5rem; background-image: url(../images/logo-title.svg); background-size: 3rem 0.8rem; -webkit-animation: logoText 1s 1;  -moz-animation: logoText 1s 1;  -o-animation: logoText 1s 1;  -ms-animation: logoText 1s 1;  animation: logoText 1s 1;}
/*动画*/
	/*logo*/
	@-webkit-keyframes jump {
		0% {
			bottom: 9rem;
			-webkit-animation-timing-function: ease-in;
		}

		60% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}

		75% {
			bottom: 2.5rem;
			-webkit-animation-timing-function: ease-in;
		}

		100% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}
	}
	@-moz-keyframes jump {
		0% {
			bottom: 9rem;
			-webkit-animation-timing-function: ease-in;
		}

		60% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}

		75% {
			bottom: 2.5rem;
			-webkit-animation-timing-function: ease-in;
		}

		100% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}
	}
	@-o-keyframes jump {
		0% {
			bottom: 9rem;
			-webkit-animation-timing-function: ease-in;
		}

		60% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}

		75% {
			bottom: 2.5rem;
			-webkit-animation-timing-function: ease-in;
		}

		100% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}
	}
	@-ms-keyframes jump {
		0% {
			bottom: 9rem;
			-webkit-animation-timing-function: ease-in;
		}

		60% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}

		75% {
			bottom: 2.5rem;
			-webkit-animation-timing-function: ease-in;
		}

		100% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}
	}
	@keyframes jump {
		0% {
			bottom: 9rem;
			-webkit-animation-timing-function: ease-in;
		}

		60% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}

		75% {
			bottom: 2.5rem;
			-webkit-animation-timing-function: ease-in;
		}

		100% {
			bottom: 2rem;
			-webkit-animation-timing-function: ease-out;
		}
	}
	/*阴影*/
	@-webkit-keyframes shrink {
		0% {
			 bottom: 0;
			 margin-left: -0.72rem;
			 width: 1.43rem;
			 height: 1.79rem;
			 background: rgba(20, 20, 20, .1);
			 box-shadow: 0px 0 px 35px rgba(20, 20, 20, .1);
			 border-radius: 30px / 40px;
			 -webkit-animation-timing-function: ease-in;
		}
		50% {
			bottom: 2.1rem;
			width: 0.48rem;
			height: 0.12rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .3);
			border-radius: 0.48rem / 0.48rem;
			margin-left: -0.24rem;
			-webkit-animation-timing-function: ease-out;
		}
		75% {
			bottom: 2.5rem;
			-webkit-animation-timing-function: ease-in;
		}
		100% {
			bottom: 0;
			margin-left: -30px;
			width: 60px;
			height: 75px;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 20px 35px rgba(20, 20, 20, .1);
			border-radius: 30px / 40px;
			-webkit-animation-timing-function: ease-in;
		}
	}
	@-moz-keyframes shrink {
		0% {
			bottom: 1.9rem;
			margin-left: -0.71rem;
			width: 1.42rem;
			height: 1.78rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.47rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}
		60% {
			bottom: 2.1rem;
			margin-left: -0.24rem;
			width: 0.48rem;
			height: 0.12rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
		75% {
			bottom: 1.9rem;
			margin-left: -0.7rem;
			width: 1.2rem;
			height: 1.4rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}

		100% {
			bottom: 2.1rem;
			width: 0.48rem;
			height: 0.12rem;
			margin-left: -0.24rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
	}
	@-o-keyframes shrink {
		0% {
			bottom: 1.9rem;
			margin-left: -0.71rem;
			width: 1.42rem;
			height: 1.78rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.47rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}
		60% {
			bottom: 2.1rem;
			margin-left: -0.24rem;
			width: 0.48rem;
			height: 0.12rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
		75% {
			bottom: 1.9rem;
			margin-left: -0.7rem;
			width: 1.2rem;
			height: 1.4rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}

		100% {
			bottom: 2.1rem;
			width: 0.48rem;
			height: 0.12rem;
			margin-left: -0.24rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
	}
	@-ms-keyframes shrink {
		0% {
			bottom: 1.9rem;
			margin-left: -0.71rem;
			width: 1.42rem;
			height: 1.78rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.47rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}
		60% {
			bottom: 2.1rem;
			margin-left: -0.24rem;
			width: 0.48rem;
			height: 0.12rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
		75% {
			bottom: 1.9rem;
			margin-left: -0.7rem;
			width: 1.2rem;
			height: 1.4rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}

		100% {
			bottom: 2.1rem;
			width: 0.48rem;
			height: 0.12rem;
			margin-left: -0.24rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
	}
	@keyframes shrink {
		0% {
			bottom: 1.9rem;
			margin-left: -0.71rem;
			width: 1.42rem;
			height: 1.78rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.47rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}
		60% {
			bottom: 2.1rem;
			margin-left: -0.24rem;
			width: 0.48rem;
			height: 0.12rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
		75% {
			bottom: 1.9rem;
			margin-left: -0.7rem;
			width: 1.2rem;
			height: 1.4rem;
			background: rgba(20, 20, 20, .1);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .1);
			border-radius: 0.71rem / 0.95rem;
			animation-timing-function: ease-in;
		}

		100% {
			bottom: 2.1rem;
			width: 0.48rem;
			height: 0.12rem;
			margin-left: -0.24rem;
			background: rgba(20, 20, 20, .3);
			box-shadow: 0px 0 0.48rem 0.71rem rgba(20, 20, 20, .2);
			border-radius: 0.48rem / 0.48rem;
			animation-timing-function: ease-out;
		}
	}
	/*logo文字*/
	@-webkit-keyframes logoText {
		0% {
			width: 0;
		}
		25% {
			 width: 0.75rem;
		}
		50% {
			width: 1.5rem;
		}
		75% {
			width: 2.25rem;
		}
		100% {
			width: 3rem;
		}
	}
	@-moz-keyframes logoText {
		0% {
			width: 0;
		}
		25% {
			width: 0.75rem;
		}
		50% {
			width: 1.5rem;
		}
		75% {
			width: 2.25rem;
		}
		100% {
			width: 3rem;
		}
	}
	@-o-keyframes logoText {
		0% {
			width: 0;
		}
		25% {
			width: 0.75rem;
		}
		50% {
			width: 1.5rem;
		}
		75% {
			width: 2.25rem;
		}
		100% {
			width: 3rem;
		}
	}
	@-ms-keyframes logoText {
		0% {
			width: 0;
		}
		25% {
			width: 0.75rem;
		}
		50% {
			width: 1.5rem;
		}
		75% {
			width: 2.25rem;
		}
		100% {
			width: 3rem;
		}
	}
	@keyframes logoText {
		0% {
			width: 0;
		}
		25% {
			width: 0.75rem;
		}
		50% {
			width: 1.5rem;
		}
		75% {
			width: 2.25rem;
		}
		100% {
			width: 3rem;
		}
	}
</style>
<script>
    import Page from '../base/Page'
    import { API } from '../config/constants'
    export default new Page({
    	data(){
                return{
                    defaultPathTo:"/home"
                }
		},
        ready(){
			var res = this.$route.query.res;
			console.log(this.$route);
			//登录成功设置初始化信息
			if (res != undefined) {
				this.clearLocalStorage();
				var resJson = JSON.parse(decodeURI(res));
				console.log(resJson);
				localStorage.setItem('enterpriseFlag',resJson['peopleRole']);
				localStorage.setItem('mycar',JSON.stringify(resJson['car']));
				localStorage.setItem('profile',JSON.stringify(resJson['profile']));
				this.defaultPathTo = localStorage.getItem('pathTo');
			}

			console.log("ready over");
        },
        methods:{
			clearLocalStorage:function () {
				localStorage.removeItem('enterpriseFlag');
				localStorage.removeItem('mycar');
				localStorage.removeItem('profile');
			}
		},
        route:{
            data:function(){
				console.log("route start");
                let fn=()=>{
                    this.$route.router.go(this.defaultPathTo)
                }
                setTimeout(fn,2000)
            }
        }
    });
</script>
